<template>
  <div class="container">
    <a-modal
      v-model:visible="visible"
      v-model:draggable="draggable"
      :title="title"
      width="auto"
      @cancel="handleCancel"
    >
      <table class="arco-table-element" cellpadding="0" cellspacing="0">
        <colgroup>
          <col style="min-width: 120px" />
        </colgroup>
        <thead>
          <tr class="arco-table-tr">
            <th class="arco-table-th">
              <span class="arco-table-cell arco-table-cell-align-left">
                <span class="arco-table-th-title">参数名</span
                ><!----><!----></span
              ><!----><!----></th
            >
            <th class="arco-table-th"
              ><span class="arco-table-cell arco-table-cell-align-left">
                <span class="arco-table-th-title">说明</span
                ><!----><!----></span
              ><!----><!----></th
            >
            <th class="arco-table-th"
              ><span class="arco-table-cell arco-table-cell-align-left">
                <span class="arco-table-th-title">类型</span
                ><!----><!----></span
              ><!----><!----></th
            >
            <th class="arco-table-th"
              ><span class="arco-table-cell arco-table-cell-align-left">
                <span class="arco-table-th-title">默认值</span
                ><!----><!----></span
              ><!----><!----></th
            >
          </tr>
        </thead>
        <tbody>
          <tr class="arco-table-tr">
            <td class="arco-table-td">
              <span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!---->
                <span class="arco-table-td-content">roles</span></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!---->
                <span class="arco-table-td-content"
                  >配置能访问该页面的角色，如果不匹配，则会被禁止访问该路由页面</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >string[]</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >-</span
                ></span
              ></td
            >
          </tr>
          <tr class="arco-table-tr">
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >requiresAuth</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >是否需要登录鉴权</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >boolean</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >false</span
                ></span
              ></td
            >
          </tr>
          <tr class="arco-table-tr">
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >icon</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >菜单配置icon</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >string</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >-</span
                ></span
              ></td
            >
          </tr>
          <tr class="arco-table-tr">
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >locale</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >一级菜单名（语言包键名）</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >string</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >-</span
                ></span
              ></td
            >
          </tr>
          <tr class="arco-table-tr">
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >hideInMenu</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >是否在左侧菜单中隐藏该项</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >boolean</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >-</span
                ></span
              ></td
            >
          </tr>
          <tr class="arco-table-tr">
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >hideChildrenInMenu</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >强制在左侧菜单中显示单项</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >boolean</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >-</span
                ></span
              ></td
            >
          </tr>
          <tr class="arco-table-tr">
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >activeMenu</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >高亮设置的菜单项</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >string</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >-</span
                ></span
              ></td
            >
          </tr>
          <tr class="arco-table-tr">
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >order</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >排序路由菜单项。如果设置该值，值越高，越靠前</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >number</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >-</span
                ></span
              ></td
            >
          </tr>
          <tr class="arco-table-tr">
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >noAffix</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >如果设置为true，标签将不会添加到tab-bar中</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >boolean</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >-</span
                ></span
              ></td
            >
          </tr>
          <tr class="arco-table-tr">
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >ignoreCache</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >如果设置为true页面将不会被缓存</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >boolean</span
                ></span
              ></td
            >
            <td class="arco-table-td"
              ><span class="arco-table-cell arco-table-cell-align-left"
                ><!----><!----><span class="arco-table-td-content"
                  >-</span
                ></span
              ></td
            >
          </tr>
        </tbody>
      </table>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import useLoading from '@/hooks/loading';
  import { useI18n } from 'vue-i18n';

  const formModel = () => {
    return {
      moduleName: '',
      author: '',
    };
  };
  export default defineComponent({
    setup(props, context) {
      const { t } = useI18n();
      const formRef = ref<FormInstance>();
      const { setLoading } = useLoading();
      const operate = ref<number>();
      return {
        formRef,
        t,
      };
    },
    data() {
      return {
        visible: false,
        draggable: true,
        title: '',
        loading: false,
      };
    },
    methods: {
      show() {
        this.visible = true;
        this.title = this.t('form.tips');
      },
      setLoading(loading: boolean) {
        this.loading = loading;
      },
      handleCancel() {
        this.visible = false;
      },
    },
  });
</script>

<style scoped lang="less">
  .container {
    padding: 20px;

    .keep-margin {
      margin-bottom: 20px;
    }
  }

  .arco-table-tr {
    height: 40px;
  }

  .form {
    width: 420px;
  }
</style>
